<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杨钦松</title>
</head>
    <style>
      html, body{
        height: 800px;
      }
        *{
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
          
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .nav{
            width: 100%;
            height: 162px;
        }
        .nav li{
            width: 20%;
            height: 74px;
            float: left;
        }
        .nav li img{
            width: 40px;
        }
        .nav li span{
            display: block;
            color: #666;
            font-size: 14px;
        }
        body {
      position: relative;
      height: 100%;
    }
    .open{
      width: 100%;
      height: 45px;
      background-color: #333;
      color: #fff;
      display: flex;
    }
    .open li{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .open li:nth-child(1){
      flex:8%;
    } 
    .open li:nth-child(1) img{
      width: 10px;
    } 
    .open li:nth-child(2){
      flex:10%;
    } 
    .open li:nth-child(2) img{
      width: 30px;
    } 
    .open li:nth-child(3){
      flex:57%;
    } 
    .open li:nth-child(4){
      flex:25%;
      background-color: #f63515;
    } 
    .search-wrapper{
      width: 100%;
      height: 44px;
      background-color: #c82519;
      color: #fff;
      display: flex;
      align-items: center;
      position:sticky;
    top:0px;
    z-index:999;
    margin-top:0px;
    }

    .btn,.login{
      width: 40px;
      height: 44px;
    }
    .btn span{
      margin: 14px 0 0 15px;
    width: 20px;
    height: 18px;
    display: block;
    background: url("image/btn.png") no-repeat;
    background-size: 100% 100%;
    } 
    .search{
      flex: 1;
      height: 30px;
      background-color: #fff;
      border-radius: 15px;
     
    }
    .login{
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .jd{
    width: 20px;
    height: 15px;
    background: url("image/jd2.png")  no-repeat;
    background-size: 20px 15px;
    margin: 8px 8px 0 15px;
    position: relative;
    z-index: 1;
    float: left;
    }
    .jd::after{
      content: "";
      height: 15px;
      width: 1px;
      display: block;
      background-color: #ddd;
      position: absolute;
      left: 30px;
    }
    .sousuo{
      display: block;
    width: 18px;
    height: 15px;
    background: url("image/jd-sprites.png") no-repeat;
    background-position: -80px 0;
    background-size: 200px;
    margin: 8px 0 0 15px;
    position: relative;
    z-index: 1;
    float: left;
    }
    .footer{
      width: 100%;
         height: 54px;
         background-color: #fff;
         display: flex;
         bottom: 0;
         position: fixed;
         left: 0;
         bottom:0;
         z-index: 31;
         box-sizing: border-box;
         font-size: 16px;
    }
    .footer li{
          
            flex: 20%;
      text-align: center;
      list-style: none;
        }
        .footer li img{
          width: 64px;
        }
        .xiu img{
          width: 100%;
        }
        
    </style>
    <link rel="stylesheet" href="./css/swiper.min.css">
<body>

  <div>
    <ul class="open">
      <li><img src="image/close.png"></li>
      <li><img src="image/jd.png"></li>
      <li>打开京东App，购物更轻松</li>
      <li>立即打开</li>
    </ul>
  </div>

  <div class="search-wrapper">
    <div class="btn"><span></span></div>
    <div class="search">
      <span class="jd"></span>
      <span class="sousuo"></span>
    </div>
    <div class="login">登录</div>
  </div>
<div class="xiu">
  <div class="swiper-container lun">
    <div class="swiper-wrapper ">
            <div class="swiper-slide"><img src = './image/70.jpg'></div>
            <div class="swiper-slide"><img src = './image/80.jpg'></div>
            <div class="swiper-slide"><img src = './image/90.jpg'></div>
            <div class="swiper-slide"><img src = './image/100.jpg'></div>
            <div class="swiper-slide"><img src = './image/110.jpg'></div>
            <div class="swiper-slide"><img src = './image/120.jpg'></div>
            <div class="swiper-slide"><img src = './image/130.jpg'></div>
            <div class="swiper-slide"><img src = './image/140.jpg'></div>
        </div>
         <!-- Add Pagination -->
         <div class="swiper-paginationa"></div>
      </div>
  </div>
</div>
  <div class="xi">
      <div class="swiper-container wang">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <ul class="nav">
        <li><a href="javascript"><img src="./image/1.png" alt="京东超市"><span>京东超市</span></a></li>
        <li><a href="javascript"><img src="./image/2.png" alt="数码电器"><span>数码电器</span></a></li>
        <li><a href="javascript"><img src="./image/3.png" alt="京东服饰"><span>京东服饰</span></a></li>
        <li><a href="javascript"><img src="./image/4.png" alt="京东生鲜"><span>京东生鲜</span></a></li>
        <li><a href="javascript"><img src="./image/5.png" alt="京东到家"><span>京东到家</span></a></li>
        <li><a href="javascript"><img src="./image/6.png" alt="充值缴费"><span>充值缴费</span></a></li>
        <li><a href="javascript"><img src="./image/7.png" alt="9.9元拼"><span>9.9元拼</span></a></li>
        <li><a href="javascript"><img src="./image/8.png" alt="领券"><span>领券</span></a></li>
        <li><a href="javascript"><img src="./image/9.png" alt="借钱"><span>借钱</span></a></li>
        <li><a href="javascript"><img src="./image/10.png" alt="PLUS会员"><span>PLUS会员</span></a></li>
        </ul>
    </div>
      <div class="swiper-slide">
        <ul class="nav">
        <li><a href="javascript"><img src="./image/11.png" alt="京东超市"><span>京东超市</span></a></li>
        <li><a href="javascript"><img src="./image/12.png" alt="数码电器"><span>数码电器</span></a></li>
        <li><a href="javascript"><img src="./image/13.png" alt="京东服饰"><span>京东服饰</span></a></li>
        <li><a href="javascript"><img src="./image/14.png" alt="京东生鲜"><span>京东生鲜</span></a></li>
        <li><a href="javascript"><img src="./image/15.png" alt="京东到家"><span>京东到家</span></a></li>
        <li><a href="javascript"><img src="./image/16.png" alt="充值缴费"><span>充值缴费</span></a></li>
        <li><a href="javascript"><img src="./image/17.png" alt="9.9元拼"><span>9.9元拼</span></a></li>
        <li><a href="javascript"><img src="./image/18.png" alt="领券"><span>领券</span></a></li>
        <li><a href="javascript"><img src="./image/19.png" alt="借钱"><span>借钱</span></a></li>
        <li><a href="javascript"><img src="./image/20.png" alt="PLUS会员"><span>PLUS会员</span></a></li>
        </ul>
      </div> 
    </div>
            <!-- Add Pagination -->
            <div class="swiper-paginationb"></div>
    </div>
    </div>
        <ul class="footer">
          <li><a href="javascript"><img src="./image/首页.png" alt="京东超市"></a></li>
          <li><a href="javascript"><img src="./image/分类.png" alt="数码电器"></a></li>
          <li><a href="javascript"><img src="./image/京喜.png" alt="京东服饰"></a></li>
          <li><a href="javascript"><img src="./image/购物车.png" alt="京东生鲜"></a></li>
          <li><a href="javascript"><img src="./image/未登录.png" alt="京东到家"></a></li>
      </ul>
      <script src="./js/swiper.min.js"></script>
      <script>
        var swiper = new Swiper('.wang', {
          pagination: {
            el: '.swiper-paginationb',
          },

        });
        var swiper1 = new Swiper(".lun", {
                pagination: {
                    el: ".swiper-paginationa",
                },
                autoplay:true,
                loop : true,
            });
      </script>
</body>
</html>